<template>
  <ScreenFit>
    <div class="dashboard">
      <div class="header">
        <BoardHeader></BoardHeader>
      </div>
      <div class="content">
        <div class="content-left">
          <div class="content-left-item">
            <TaskDetail1 :info="overviewInfo"></TaskDetail1>
          </div>
          <div class="content-left-item">
            <TaskDetail2 :info="alarmData"></TaskDetail2>
          </div>
          <div class="content-left-item">
            <TaskDetail3 :info="taskData"></TaskDetail3>
          </div>
        </div>
        <div class="content-middle">
          <div class="content-middle-item">
            <TaskDetail4 :info="indicatorsInfo"></TaskDetail4>
          </div>
          <div class="content-middle-item">
            <div class="content-middle-item-left">
              <TaskDetail5></TaskDetail5>
            </div>
            <div class="content-middle-item-right">
              <TaskDetail6></TaskDetail6>
            </div>
          </div>
        </div>
        <div class="content-right">
          <div class="content-right-item">
            <TaskDetail7 :info="waiterStatusList"></TaskDetail7>
          </div>
          <div class="content-right-item">
            <TaskDetail8></TaskDetail8>
          </div>
          <div class="content-right-item">
            <TaskDetail9 :info="pendDisposeList"></TaskDetail9>
          </div>
        </div>
      </div>
    </div>
  </ScreenFit>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import BoardHeader from '@/components/taskDashBoard/BoardHeader.vue'
import TaskDetail1 from '@/components/taskDashBoard/TaskDetail1.vue'
import TaskDetail2 from '@/components/taskDashBoard/TaskDetail2.vue'
import TaskDetail3 from '@/components/taskDashBoard/TaskDetail3.vue'
import TaskDetail4 from '@/components/taskDashBoard/TaskDetail4.vue'
import TaskDetail5 from '@/components/taskDashBoard/TaskDetail5.vue'
import TaskDetail6 from '@/components/taskDashBoard/TaskDetail6.vue'
import TaskDetail7 from '@/components/taskDashBoard/TaskDetail7.vue'
import TaskDetail8 from '@/components/taskDashBoard/TaskDetail8.vue'
import TaskDetail9 from '@/components/taskDashBoard/TaskDetail9.vue'
import {
  queryAlarmTaskOverview,
  getStatisticalIndicators,
  getWaiterStatus,
  getPendDispose,
  getTrace,
  queryTend
} from '@/api/taskApi'
import { useRoute } from 'vue-router'
import { useBaseParamStore } from '@/stores/baseParams'

const baseParamStore = useBaseParamStore()
const route = useRoute()

// 告警任务巡查预览
const overviewInfo = ref()
const getAlarmTaskOverview = async () => {
  try {
    const res = await queryAlarmTaskOverview({
      orgId: route.query.orgId,
      startTime: baseParamStore.baseParam?.pickTime[0],
      endTime: baseParamStore.baseParam?.pickTime[1]
    })
    if (res && res.data) {
      overviewInfo.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 查询任务调度统计区指标
const indicatorsInfo = ref()
const queryStatisticalIndicators = async () => {
  try {
    const res = await getStatisticalIndicators({
      orgId: route.query.orgId,
      startDate: `${baseParamStore.baseParam?.pickTime[0]}  00:00:00`,
      endDate: `${baseParamStore.baseParam?.pickTime[1]} 23:59:59`
    })
    if (res && res.data) {
      indicatorsInfo.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 查询服务员状态接口
const waiterStatusList = ref([])
const queryWaiterStatus = async () => {
  try {
    const res = await getWaiterStatus({
      orgId: route.query.orgId,
      startDate: `${baseParamStore.baseParam?.pickTime[0]}  00:00:00`,
      endDate: `${baseParamStore.baseParam?.pickTime[1]} 23:59:59`
    })
    if (res && res.data) {
      waiterStatusList.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 精准巡查任务监控看板（调度员）-已派单任务跟踪
const pendDisposeList = ref([])
const queryPendDispose = async () => {
  try {
    const res = await getPendDispose({
      orgId: route.query.orgId,
      startTime: baseParamStore.baseParam?.pickTime[0],
      endTime: baseParamStore.baseParam?.pickTime[1]
    })
    if (res && res.data) {
      pendDisposeList.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 精准巡查任务监控看板（调度员）-已派单任务跟踪
const traceList = ref([])
const queryTrace = async () => {
  try {
    const res = await getTrace({
      orgId: route.query.orgId,
      startTime: baseParamStore.baseParam?.pickTime[0],
      endTime: baseParamStore.baseParam?.pickTime[1]
    })
    if (res && res.data) {
      traceList.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 精准巡查任务监控看板（服务部整体）-趋势分析
const taskData = ref() // 告警趋势
const alarmData = ref()
const getTend = async () => {
  try {
    const res = await queryTend({
      orgId: route.query.orgId,
      startDate: baseParamStore.baseParam?.pickTime[0],
      endDate: baseParamStore.baseParam?.pickTime[1]
    })
    if (res && res.data) {
      taskData.value = res.data.distributionAnalysisList
      alarmData.value = res.data.alarmTrendAnalysisList
    }
  } catch (error) {
    console.error('获取趋势分析信息失败:', error)
  }
}

onMounted(() => {
  getAlarmTaskOverview()
  queryStatisticalIndicators()
  queryWaiterStatus()
  queryPendDispose()
  queryTrace()
  getTend()
})
</script>

<style scoped lang="scss">
.dashboard {
  background: linear-gradient(90deg, #04102a, #123d70, #04102a);
  color: white;
  width: 100%;
  height: 100%;

  .content {
    display: flex;
    padding: 0 43px 30px;

    .content-left {
      width: 500px;
      background-color: rgba($color: #000000, $alpha: 0.1);
    }

    .content-middle {
      flex: 1;
      margin: 0 10px;

      &-item {
        display: flex;
        justify-content: space-between;
      }
    }

    .content-right {
      width: 500px;
      background-color: rgba($color: #000000, $alpha: 0.1);

      &-item {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
